import React, { useEffect, useRef, useState } from "react";
import * as echarts from "echarts";

import type { MenuProps } from "antd";
import { Button, Dropdown, Space } from "antd";

type Props = {};

const Second = (props: Props) => {
  // 点击数据
  let [data, setData] = useState("今天");
  const [colorData, setColorData] = useState("#559EFD");
  const onMenuClick: MenuProps["onClick"] = (e) => {
    console.log("click", e);
    items.forEach((item, index) => {
      if (item.key == e.key) {
        console.log(item);
        setData(item.label);
      }
    });
    if (e.key == "2") {
      // setColorData("#FFA315");

      alert(colorData);
    }
    if (e.key == "3") {
      setColorData("#ED729C");
      alert(3);
    }
  };

  const items = [
    {
      key: "1",
      label: "今天",
    },
    {
      key: "2",
      label: "近一周",
    },
    {
      key: "3",
      label: "近一月",
    },
  ];
  // 图表
  const keywords = useRef<any>();
  useEffect(() => {
    const myChart = echarts.init(keywords.current);

    option && myChart.setOption(option);
  }, []);
  const option = {
    title: {
      text: "热门出发到达城市排名",
      textStyle: {
        color: "#00CBA8",
        fontSize: 16,
        fontWeight: 500,
      },
    },
    grid: [
      {
        bottom: 20,
        top: 90,
      },
    ],
    xAxis: {
      type: "value",
      axisLabel: {
        show: false,
      },
      splitLine: {
        // 自定义网格线样式
        lineStyle: {
          type: "dashed",
          color: "rgba(233, 233, 233, 0.2)",
        },
      },
    },
    yAxis: {
      type: "category",
      scale: true,
      data: [
        "哈尔滨",
        "桂林",
        "成都",
        "澳门",
        "香港",
        "武汉",
        "深圳",
        "北京",
        "上海",
        "三亚",
      ],
      axisTick: {
        //x轴刻度线
        show: false,
      },
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130, 129, 220, 203],
        type: "bar",
        barWidth: 10,
        itemStyle: {
          color: colorData,
        },
      },
    ],
  };
  return (
    <div style={{ width: "100%", height: "100%" }} className="aa">
      <div ref={keywords} style={{ width: "100%", height: "100%" }}></div>
      <Dropdown.Button
        menu={{ items, onClick: onMenuClick }}
        className="select"
      >
        {data}
      </Dropdown.Button>
    </div>
  );
};

export default Second;
